<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <!-- 需要转换的html结构 -->
    <div id="test-box">
        <!-- 这里不需要把图片路径放入src了。直接通过data存储就行 -->
        <img id="img1" src=""
            data-imgUrl="http://fastmarket.oss-cn-shenzhen.aliyuncs.com/oss/static/other/1/images/baseMap_index.jpg">
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/2.2.3/jquery.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.js"></script>

    <script>
        $(function () {

            var url = $("#img1").attr('data-imgUrl');
            // var url = "http://192.168.120.86/group1/M00/02/CE/wKh4Vl5Ddu2AbyPIAAC8RQ7yuuw662.jpg"

            var canvas = document.createElement('canvas'),
                ctx = canvas.getContext('2d'),
                img = new Image();
            img.crossOrigin = 'Anonymous'; // 重点！设置image对象可跨域请求
            img.src = url + "?timeStamp=" + new Date().getTime(); //解决缓存引起访问失败需要添加时间戳。。。。。问题的关键点

            img.onload = function () {
                canvas.height = img.height;
                canvas.width = img.width;
                ctx.drawImage(img, 0, 0);
                var dataURL = canvas.toDataURL('image/jpeg');

                console.log(dataURL)
                $("#img1").attr("src", dataURL)


                // // 赋值完成，生成图片
                // html2canvas($('#test-box'), {
                //   useCORS: true,
                //   allowTaint: true
                // }).then(function (canvas) {
                //   console.log(canvas) // 生成的canvas对象
                //   var  resImgUrl = canvas.toDataURL(); // 最后拿到了对应节点生成的图片（base64格式）
                //   alert(resImgUrl)
                // })
            };
        })
    </script>
</body>

</html>